import { useState, useEffect } from 'react';
import { message } from 'antd';

const fileFormat: any = {
    mp4: 'video/mp4',
    ogg: 'video/ogg',
    webm: 'video/webm',
}

interface Props {
    /**视频的全路径地址 */
    src: string,

    /**视频的元素宽度 */
    width?: string | number

    /**视频的元素高度 */
    height?: string | number

    /**视频播放异常时的自定义提示信息 */
    errorAlt?: string

    /**视频播放异常时的自定义处理函数 */
    onError?: Function
}

const VideoView: React.FC<Props> = ({
    src,
    width,
    height,
    errorAlt,
    onError
}) => {
    console.debug('VideoView', src);

    const [type, setType] = useState();
    useEffect(() => {
        if (src) {
            const videoFormat: any = src.split('.').pop();
            const _type = fileFormat[videoFormat] || fileFormat.mp4;
            console.log('_type', _type);
            setType(_type);
        }
    }, [src])

    function handleError() {
        message.error(errorAlt || '视频播放失败')
        onError && onError()
    }

    return (
        <video
            controls
            autoPlay
            width={width || 960}
            height={height || 540}
            onError={handleError}
        >
            <source src={src} type={type} />
        </video>
    )
}

export default VideoView
